<style scoped>
/*.main-header-search-input{
    height: 30px;
    width: 100%;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 15px 0 30px;
    border: 1px solid #e3e3e3;
    color: #2c3e50;
    outline: none;
    border-radius: 10px;
    margin-right: 10px;
    transition: border-color 0.2s ease;
    background: #fff url(../../images/search.png) 8px 5px no-repeat;
    background-color: rgba(54, 64, 74, 0.05);
    background-size: 20px;
    vertical-align: middle;
}*/
.platform-main-sidemenu{
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 21;
    width: 200px;
    overflow: auto;
    /*background: rgb(73, 80, 96);*/
    background: #35363a;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    -webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}
.main-sidemenu-brand{
    padding: 20px 30px 20px 20px;
}
.main-sidemenu-item,.main-sidemenu-submenu div,.main-sidemenu-submenu ul li{
    display: block;
    outline: 0;
    list-style: none;
    font-size: 14px;
    z-index: 1;
    cursor: pointer;
    padding: 14px 24px;
    position: relative;
    color: #fff;
    transition: all 0.2s ease-in-out;
}
.main-sidemenu-submenu-open ul{
	display: block;
  color: rgb(73, 80, 96);
  font-size: 14px;
  position: relative;
  z-index: 900;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  list-style: none;
  background-color: #2b303a;
}
.main-sidemenu-submenu-open ul li{
    padding-left: 43px;
    z-index: 2;
    transition: all 0.2s ease-in-out;
}
.main-sidemenu-item:hover{
    background-color: #414247;
    /*color:#ffffff;*/
    border-left: 4px solid #2298d1;
}
.main-sidemenu-item-active{
    color:#ffffff;
    border-left: 4px solid #2298d1;
}
.main-sidemenu-item-child-active{
    color:#ffffff!important;
    background: #2298d1;
}

</style>
<template>
    <div class="platform-main-sidemenu">
        <div class="main-sidemenu-brand">
            <img src="http://demo.neontheme.com/assets/images/logo@2x.png" style="width:70%;height:auto">
        </div>
        <ul>
        <li :class="[sidemenuItem.children.length>0?'main-sidemenu-submenu':'main-sidemenu-item',sidemenuItem.isClick&&sidemenuItem.children.length==0&&sidemenuItem.name==currentPageName?'main-sidemenu-item-active':'',sidemenuItem.isClick&&sidemenuItem.children.length>0?'main-sidemenu-submenu-open':'']" @click="sidemenuItem.children.length>0?'':menuitemClick($index)" v-for="(sidemenuItem,$index) in sidemenu">
        	<div @click="sidemenuItem.children.length>0?menuitemClick($index):''" class="sidemenu-item-title">
        		<span><Icon :type="sidemenuItem.icon"/> &nbsp&nbsp{{sidemenuItem.name}} <Icon :class="sidemenuItem.isClick?'rotate-180':''" v-if="sidemenuItem.children.length>0" style="float:right;line-height:unset;" type="ios-arrow-down"></Icon></span>
        	</div>
        	<transition name="collapse"><ul v-show="sidemenuItem.isClick" v-if="sidemenuItem.children.length>0">
        		<li @click="childClick(itemchild.id,itemchild.name,itemchild.icon,itemchild.href)" :class="itemchild.name==currentPageName?'main-sidemenu-item-child-active':''" v-for="itemchild in sidemenuItem.children"><Icon :type="itemchild.icon"/> &nbsp&nbsp {{itemchild.name}}
        		</li>
        		</ul></transition>
      		</li>
    		</ul>
    </div>
</template>
<script>
    export default {
    	data:function(){
    		return {
    			currentPageName:'',
    			sidemenu:[
          {
              id:'menuNo1',
              name:'基本表格',
              isClick:false,
              children:[],
              icon:'heart',
              class:[],
              href:'basic-table'
          },
          {
              id:'menuNo2',
              name:'标题二',
              isClick:false,
              children:[],
              icon:'home',
              class:[],
              href:'firstPage'
          },
          {
              id:'menuNo3',
              name:'标题三',
              isClick:false,
              icon:'edit',
              href:'',
              children:[
              {
                  id:'childNo31',
                  name:'小标题一',
                  isClick:false,
                  icon:'compose',
                  href:'secondPage'
              },
              {
                  id:'childNo32',
                  name:'小标题二',
                  isClick:false,
                  icon:'compass',
                  href:'firstPage'
              }],
              class:[]
          },
          {
              id:'menuNo4',
              name:'标题四',
              isClick:false,
              icon:'locked',
              href:'',
              children:[{
                  id:'childNo41',
                  name:'小2标题一',
                  isClick:false,
                  icon:'wifi',
                  href:'firstPage'
              },
              {
                  id:'childNo42',
                  name:'小2标题二',
                  isClick:false,
                  icon:'camera',
                  href:'firstPage'
              }],
              class:[]
          }]
    		}
    	},
      created:function(){
        this.$store.commit('sidebarList',this.sidemenu);
      },
      mounted:function(){
        this.$store.commit('sidebarList',this.sidemenu);
      },
      computed :{
        currentPage (){
          return this.$store.state.currentPageName;
        }
      },
      watch: {
        currentPage(val){
          if(this.childContainedIndex(val) != -1){
            this.$set(this.sidemenu[this.childContainedIndex(val)],'isClick',true);
          }
          this.currentPageName = val;
        }
      },
			methods: {
			    menuitemClick:function(index){
              if(this.sidemenu[index].children.length > 0){
                  this.$set(this.sidemenu[index],'isClick',!this.sidemenu[index].isClick);
              }else{
                this.$set(this.sidemenu[index],'isClick',true);
              	this.currentPageName = this.sidemenu[index].name;
                this.$store.commit('setCurrentPage',this.currentPageName);
                this.$store.commit('setSideBar',{name:this.currentPageName,icon:this.sidemenu[index].icon,href:this.sidemenu[index].href});
              }
          },
          childClick:function(id,name,icon,href){
          	this.currentPageName = name;
            this.$store.commit('setCurrentPage',name);
            this.$store.commit('setSideBar',{name:name,icon:icon,href:href});
          },
          //检查是否含有某个子元素
          childContainedIndex:function(childName){
            var childIndex = -1;
            for(var index = 0;index<this.sidemenu.length;index++){
              if(this.sidemenu[index].children.length>0){
                var childrenArr = this.sidemenu[index].children;
                for(var j=0;j<childrenArr.length;j++){
                  if(childrenArr[j].name == childName){
                    childIndex = index;break;
                  }
                }
                if(childIndex != -1)break;
              }
            }
            return childIndex;
          }
			}
    };
</script>
